<script setup lang="ts">
import { ArrowLeft } from '@element-plus/icons-vue'
import { useUserStore } from '@/stores/user'
import { useRoute } from 'vue-router'
import type { CardViewDetailI } from '@/types/card'
import { ref } from 'vue'
import { cardViewDetailApi } from '@/apis/card'

const { query } = useRoute()
const viewDetail = ref<CardViewDetailI>({
  personName: '',
  phoneNumber: '',
  carNumber: '',
  carBrand: '',
  rechargeList: [],
})
const getViewDetail = async (id?: any) => {
  if (id) {
    viewDetail.value = await cardViewDetailApi(id)
    console.log(viewDetail.value)
  }
}
getViewDetail(query.id)
</script>

<template>
  <div class="page-container">
    <el-page-header :icon="ArrowLeft" @back="$router.back()">
      <template #content>
        <span class="text-large font-600 mr-3"> 查看详情 </span>
      </template>
      <template #extra> {{ useUserStore().profile.name }} </template>
    </el-page-header>
    <main class="body-container">
      <!-- 车辆信息 -->
      <div class="form-container">
        <div class="title">车辆信息</div>
        <div class="form-content">
          <div class="one">
            <div>
              <span class="label-text">车主姓名:</span>&nbsp;&nbsp;{{
                viewDetail?.personName
              }}
            </div>
            <div>
              <span class="label-text">联系方式:</span>&nbsp;&nbsp;{{
                viewDetail?.phoneNumber
              }}
            </div>
          </div>
          <div class="one">
            <div>
              <span class="label-text">车牌号码:</span>&nbsp;&nbsp;{{
                viewDetail?.carNumber
              }}
            </div>
            <div>
              <span class="label-text">车辆品牌:</span>&nbsp;&nbsp;{{
                viewDetail?.carBrand
              }}
            </div>
          </div>
        </div>
      </div>
      <!-- 月卡缴费记录 -->
      <div class="form-container" style="margin-top: 20px">
        <div class="title">月卡缴费记录</div>
        <el-table :data="viewDetail?.rechargeList" style="padding: 20px 0">
          <el-table-column
            label="序号"
            type="index"
            width="80"
            align="center"
          />
          <el-table-column label="有效时间" align="center" prop="cardStartDate">
            <template #default="{ row }">
              {{ row.cardStartDate + '至' + row.cardEndDate }}
            </template>
          </el-table-column>
          <el-table-column
            label="支付金额"
            align="center"
            prop="paymentAmount"
          />
          <el-table-column
            label="支付方式"
            align="center"
            prop="paymentMethod"
          />
          <el-table-column label="办理时间" align="center" prop="createTime" />
          <el-table-column label="办理人" align="center" prop="createUser" />
        </el-table>
      </div>
    </main>
  </div>
</template>

<style scoped lang="scss">
.page-container {
  background-color: #f4f6f8;
  /* 隐藏 WebKit 浏览器的滚动条 */
  &::-webkit-scrollbar {
    display: none;
  }

  /* 隐藏 Firefox 的滚动条 */
  scrollbar-width: none;

  /* 隐藏 IE 和 Edge 的滚动条 */
  -ms-overflow-style: none;

  .el-page-header {
    padding: 20px;
    background-color: #fff;
  }

  .body-container {
    width: 82%;
    margin: 20px auto;

    .form-container {
      background-color: #fff;

      .title {
        height: 60px;
        line-height: 60px;
        padding-left: 20px;
        border-bottom: 1px solid rgb(237, 237, 237, 0.9);
      }

      .form-content {
        margin: 0 auto;
        padding: 30px 0;
        width: 70%;

        .one {
          display: flex;
          justify-content: space-between;
        }

        .one:nth-child(2) {
          margin-top: 20px;
        }

        .label-text {
          color: rgb(161, 164, 171);
        }
      }

      .el-table {
        ::v-deep(.el-table__header th) {
          background-color: rgb(237, 237, 237, 0.9);
          color: rgb(43, 37, 37);
          padding: 10px 0;
        }

        ::v-deep(.el-table__body tr) {
          height: 50px;
        }
      }
    }
  }
}
</style>
